<template>
  <div style="width: 60%; margin: 10px auto" class="min-h-screen">
    <!-- 主要内容区 -->
    <main class="pb-8 max-w-7xl mx-auto px-4">
      <!-- 成就统计 -->
      <div class="bg-white rounded-lg p-6 mb-8 shadow-sm">
        <div class="flex items-center justify-between mb-4">
          <div class="space-y-2">
            <h2 class="text-lg font-medium">总体进度</h2>
            <div class="text-3xl font-bold text-indigo-600">
              {{ achievementStats.completed }}/{{ achievementStats.total }}
            </div>
          </div>
          <div class="text-right">
            <div class="text-sm text-gray-500 mb-1">完成度</div>
            <div class="text-2xl font-bold text-indigo-600">
              {{ percentage }}%
            </div>
          </div>
        </div>
        <el-progress
          :percentage="percentage"
          :stroke-width="20"
          class="achievement-progress"
          :show-text="false"
        />
      </div>

      <!-- 成就列表 -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div
          v-for="achievement in achievements"
          :key="achievement.id"
          class="bg-white rounded-lg p-6 shadow-sm transition-transform hover:transform hover:scale-102 cursor-pointer"
          :class="{ 'opacity-50': !achievement.completed }"
        >
          <div class="flex items-start space-x-4">
            <div
              class="w-24 h-24 rounded-lg from-indigo-500 to-purple-600 flex items-center justify-center"
            >
              <el-image :src="achievement.image" fit="cover"></el-image>
            </div>
            <div class="flex-1">
              <div class="flex items-center justify-between">
                <h3 class="text-lg font-medium" v-if="achievement.completed">
                  {{ achievement.name }}
                </h3>
                <h3 class="text-lg font-medium" v-else>
                  {{ achievement.nextName }}
                </h3>
                <el-tag
                  :type="achievement.completed ? 'success' : 'info'"
                  size="small"
                >
                  {{ achievement.completed ? "已完成" : "进行中" }}
                </el-tag>
              </div>
              <p class="text-gray-500 mt-2" v-if="achievement.completed">
                {{ achievement.description }}
              </p>
              <p class="text-gray-500 mt-2" v-else>
                目标：{{ achievement.nextDescription }}
              </p>
              <div class="mt-4 flex items-center justify-between">
                <div class="flex items-center">
                  <el-rate
                    v-model="achievement.grade"
                    disabled
                    v-if="achievement.completed"
                  ></el-rate>
                  <el-progress
                    :percentage="
                      Math.round(
                        (achievement.progress / achievement.nextTarget) * 100
                      )
                    "
                    :stroke-width="4"
                    class="w-24"
                    v-else
                  />
                </div>
                <span class="text-sm text-gray-400">{{
                  achievement.completed ? achievement.completedAt : "未完成"
                }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { computed, onMounted, ref } from "vue";
import { GoldMedal } from "@element-plus/icons-vue";
import { Achievements } from "@/utils/achievement.js";
import request from "@/utils/request.js";
onMounted(() => {
  console.log(Achievements);
  getAchievementStats();
});

const achievements = ref([]);

const achievementStats = ref({
  completed: 0,
  total: 15,
});

const percentage = computed(() => {
  if (achievementStats.value.completed) {
    return (
      (achievementStats.value.completed / achievementStats.value.total) *
      100
    ).toFixed(2);
  } else {
    return 0;
  }
});
const getAchievementStats = async () => {
  const respone = await request.get("achievement/list");
  console.log(respone.data);

  achievements.value = Achievements.map((item) => {
    const completedIndex = respone.data.findIndex(
      (v) => v.conditionType === item.type
    );
    let grade = 0;
    if (completedIndex > -1) {
      grade = getStatgeGrade(
        item.stages,
        respone.data[completedIndex].progressValue
      );
    }
    const isCompleted = completedIndex > -1 && grade > 0;
    return {
      name: grade > 0 ? item.stages[grade - 1].tag : item.name,
      description: grade > 0 ? item.stages[grade - 1].description : "",
      progress: respone.data[completedIndex].progressValue,
      completed: isCompleted,
      completedAt: respone.data[completedIndex].updateTime.slice(0, 10),
      image: item.imageUrl,
      nextDescription: !isCompleted ? item.stages[0].description : "",
      nextName: !isCompleted ? item.stages[0].tag : "",
      nextTarget: !isCompleted ? item.stages[0].target : "",
      grade,
    };
  });
  console.log(achievements.value);
};

const getStatgeGrade = (statges, value) => {
  for (const statge of statges) {
    if (statge.target <= value) {
      achievementStats.value.completed += statge.grade;
      return statge.grade;
    }
  }
  return -1;
};
</script>

<style scoped>
@import "@/assets/css/tailwind.min.css";

.achievement-progress :deep(.el-progress-bar__outer) {
  background-color: #e5edff !important;
  border-radius: 10px;
}

.achievement-progress :deep(.el-progress-bar__inner) {
  background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%);
  border-radius: 10px;
}

:deep(.el-progress-bar__inner) {
  transition: width 0.6s ease;
}

.hover\:scale-102:hover {
  transform: scale(1.02);
}
</style>
